<template>
  <div class="page-wrapper">
    <JoinApplicationPhaseStepper />
    <div class="query-form">
      <b-form>
        <div class="form-line">
          <label for="username">* 个人/法人身份证号:</label>
          <b-input
            id="id"
            v-model="$v.form.id.$model"
            :state="$v.form.id.$dirty ? !$v.form.id.$error : null"
          />
        </div>
      </b-form>
      <b-button
        class="btn-submmit"
        variant="outline-secondary"
        pill
        :disabled="submittingForm"
        @click="onQueryBtnPressed"
      >
        查询
      </b-button>
    </div>
    <div class="result-list" :class="{ 'no-result': noResult }">
      <p v-if="noResult && queried">没有找到相关入驻申请</p>
      <!-- <div v-if="!noResult" class="result-collapse-wrapper">
        <a-collapse accordion>
          <a-collapse-panel
            v-for="result in queryResults"
            :key="result.id"
            header="result.entity_name"
            :disabled="!result.remark"
          >
            <template slot="header">
              <div class="result-item">
                <p>申请主体: {{ result.entity_name }}</p>
                <p
                  :class="{ [`status-${result.status}`]: true }"
                  style="margin-left: auto;"
                >
                  {{ mapResultStatus(result.status) }}
                </p>
              </div>
            </template>
            <p>审核理由：{{ result.remark }}</p>
          </a-collapse-panel>
        </a-collapse>
      </div> -->
      <div v-if="!noResult" class="result-wrapper">
        <div
          v-for="result in queryResults"
          :key="result.id"
          class="result-item"
        >
          <p>申请主体: {{ result.entity_name }}</p>
          <p
            :class="{ [`status-${result.status}`]: true }"
            style="margin-left: auto;"
          >
            {{ mapResultStatus(result.status) }}
          </p>
          <p v-if="!!result.remark" class="audit-remark">
            审核理由：{{ result.remark }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators';
import JoinApplicationPhaseStepper from '@/components/m/JoinApplicationPhaseStepper';
import siteConfig from '@/assets/config/site';

export default {
  queryJoinApplicationAPI: `${siteConfig.apiPrefix}${siteConfig.apis.queryJoinApplication}`,
  components: {
    JoinApplicationPhaseStepper,
  },
  layout: 'staticBanner',
  head() {
    return {
      title: '历史审核意见',
    };
  },
  data() {
    return {
      form: {
        id: null,
      },
      submittingForm: false,
      queryResults: [],
      queried: false,
    };
  },
  computed: {
    noResult() {
      return this.queryResults.length === 0;
    },
  },
  validations: {
    form: {
      id: {
        required,
      },
    },
  },
  methods: {
    async onQueryBtnPressed() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        this.$message.error('请填入待查询的个人/法人身份证号');
        return;
      }
      this.submittingForm = true;
      let history = [];
      try {
        history = (await this.$axios.$get(
          this.$options.queryJoinApplicationAPI,
          { params: this.form }
        )).data.entries;
        this.submittingForm = false;
        this.resetForm();
      } catch (err) {
        history = null;
        this.submittingForm = false;
        if (err.response && err.response.data && err.response.data.msg) {
          this.$message.error(err.response.data.msg);
        } else {
          this.$message.error('网络错误，请稍后再试');
        }
      }
      console.log('>>>>history', history);
      this.queryResults = [...history];
      this.queried = true;
    },
    resetForm() {
      this.$v.$reset();
    },
    mapResultStatus(status) {
      switch (status) {
        case '1':
          return '已通过';
        case '2':
          return '已驳回';
        default:
          return '等待审核';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$width-ratio: 90%;
$max-width: 420px;

.page-wrapper {
  height: 100%;
  width: 100%;
  background: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  @include media-breakpoint-up(sm) {
    padding-top: $main-nav-bar-height;
  }
}
.query-form {
  // width: 100%;
  width: $width-ratio;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(253, 190, 34, 1);
  padding: 24px;
  margin: 24px 6px 0px;
  border-radius: 4px;
  @include media-breakpoint-down(xs) {
    width: 100%;
    margin-top: 0px;
  }
  @include media-breakpoint-down(xs) {
    padding-left: 0px;
    padding-right: 0px;
  }
}
form {
  max-width: unset;
  @include media-breakpoint-down(xs) {
    padding-left: 12px;
    padding-right: 12px;
  }
  @include media-breakpoint-up(sm) {
    padding-left: 12px;
    padding-right: 12px;
  }
}
.form-line {
  border: none;
  margin: 0;
  @include media-breakpoint-down(xs) {
    label {
      flex: 0 0 144px;
    }
    input {
      border-bottom: 1px solid #ced4da;
    }
  }
}
.btn {
  width: $width-ratio;
  max-width: $max-width;
  height: 36px;
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 34px;
  font-size: 14px;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  background: #fff;
  box-shadow: 0 1px 8px -2px rgba(0, 0, 0, 0.5);
  margin-top: 30px;
}
.result-list {
  height: 100%;
  width: $width-ratio;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  @include media-breakpoint-down(xs) {
    width: 100%;
  }
  &.no-result {
    justify-content: center;
  }
}
.result-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.result-collapse-wrapper {
  width: 100%;
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-start;
  // align-items: center;
}
.result-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 24px;
  background-color: #fff;
}
.result-item:nth-child(odd) {
  background-color: #f5f5f5;
}
.audit-remark {
  flex: 0 0 100%;
  padding-left: 24px;
  font-size: 12px;
  color: #666;
  margin: 0px;
}
.status-0 {
  color: #096dd9;
}
.status-1 {
  color: #7cb305;
}
.status-2 {
  color: #cf1322;
}
</style>
